<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color:#fff;">
        <el-button icon="el-icon-edit" type="primary" style="margin-top: 20px;" @click="add()">新建角色</el-button>
        <el-table highlight-current-row height="400px" style="margin-top: 0px;padding-left:29px;" :data="juseDate" @row-click="change">
          <el-table-column label="角色名称" prop="rname" label-width="200px"></el-table-column>
        </el-table>

      </el-aside>

      <el-container>
        <el-header style="text-align: center;font-size: 18px;background: #fff;
    color:black;
    line-height:60px;margin-left: 19px;width: 865px;">
          <span>角色配置权限</span>
        </el-header>

        <el-main style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 865px; margin-left: 19px; margin-top: 20px;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="角色员工" name="first">
              <el-table  :data="yonghuDate" height="300px">
                <el-table-column label="用户名" prop="uname"></el-table-column>
                <el-table-column label="入职日期" prop="rdate"></el-table-column>
                <el-table-column label="冻结/启用">
                  <template slot-scope="scope">
                   <el-switch
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                   v-model="scope.row.isstatus"
                   :active-value="1"
                   :inactive-value="0"
                   @change="chageSwitch($event,scope.row,scope.$index)"
                   >

                   </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="角色权限" name="second">
              <el-tree
                :data="menvDate"
                show-checkbox
                node-key="mid"
                ref="tree"
                :default-expanded-keys="menvCheks"
                :default-checked-keys="menvCheks"
                :props="defaultProps"
                @check="checkchange">
              </el-tree>
            </el-tab-pane>


          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="添加角色"  :visible="visible" @close="visible=false" style="margin-top: 100px; width: 50%;margin-left: 451px;">
      <el-form >
        <el-form-item label="角色名称" label-width="80px">
          <el-input v-model="addjuese.userName"></el-input>
        </el-form-item>

      </el-form>
    	<template slot="footer">
    		<el-button type="primary" @click="closeMe">确定</el-button>
    		<el-button type="info" @click="visible=false">取消</el-button>
    	</template>
    </el-dialog>
  </div>
</template>
<style scoped="scoped">
  .el-aside {
    color: #333;
  }
</style>

<script>
  import axios from 'axios'
  export default {
    data() {

      return {
        juseDate: [],
        activeName: 'first',
        rid: 0,
        yonghuDate: [],
        total: 0,
        visible:false,
        addjuese:{
          userName:'',
          isstatus:'1'
        },
        menvDate:[],
         defaultProps: {
                  children: 'children',
                  label: 'name',
                  mid:'mid',
                  path:'path'
                },
        menvCheks:[],
        menuOpen:[],
        juese:{
         rid:'',
         createby:'',
         createtime:'',
         isstatus:'',
         rname:'',
         users:[],
         menus:[]
        }
      }
    },
    methods: {
      getMenu(){
        axios.get("http:localhost:8086/menu/getMenu").then(vs=>{
         this.menvDate=vs.data
         var self=this
         vs.data.forEach(function(item){
           self.menuOpen.push(item.mid)
         })
         console.log(this.menvDate)
        })
      }
      ,
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getDate() {
        axios.get("http:localhost:8086/role/alls").then(vs => {
          this.juseDate = vs.data

        }).catch(r => {
          console.log(r)
        })

      },
      change(row, column, event) {
      this.juese=row
      console.log(row);
       this.$refs.tree.setCheckedKeys([]);
        var self=this
       axios.get("http:localhost:8086/user/getByrid",{params:{
          rid: row.rid,
          pageNum: 1,
          pageSize: 5
        }}).then(vs => {
          this.yonghuDate = vs.data.list
          this.total = vs.data.total
          this.yonghuDate.forEach(function(item){
          item.rdate=self.aaa(item.rdate)
          })
          console.log(this.yonghuDate)
        }).catch(r=>console.log(r));
        var self=this
        axios.get("http:localhost:8086/menu/getRid",{params:{
          rid:row.rid
        }}).then(vs=>{
            console.log(vs.data)
            this.menvCheks=[];
            vs.data.forEach(function(item){

              if(item.mid!=null){
                if(item.children != null){
                  item.children.forEach(function(item2){
                    self.menvCheks.push(item2.mid)
                  })
                }

              }
            })
            console.log(this.menvCheks)
        })
      },
      isload() {
        var self=this
        axios.get("http:localhost:8086/user/getByrid",{params: {
          rid: 1,
          pageNum: 1,
          pageSize: 5
        }}).then(vs => {
          this.yonghuDate = vs.data.list
          this.total = vs.data.total
          this.yonghuDate.forEach(function(item){

          item.rdate=self.aaa(item.rdate)
          })
          console.log(this.yonghuDate)
        })
      },
      dongjie(row) {

      }
      ,
      aaa:function(asd){
              var date = new Date(asd) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                      var Y = date.getFullYear() + '-'
                      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
                      var D = date.getDate() + ' '
                      var h = date.getHours() + ':'
                      var m = date.getMinutes() + ':'
                      var s = date.getSeconds()

              console.log(Y+M+D+h+m+s);
              return Y+M+D+h+m+s;
            },
            /**
             * 确定添加角色
             */
            closeMe(){
             let postData=this.$qs.stringify({
             rname: this.addjuese.userName,
             isstatus: this.addjuese.isstatus,
             createby: this.$store.state.user.uname
             })
             axios.post("http:localhost:8086/role/add",
             postData).then(v => {
               if (v.data) {
                 this.$message("添加成功")

                 this.addjuese.userName = ""
                 this.visible = false
                 this.getDate()
               } else if (v.data == false) {
                 this.$message("添加失败已有改角色")
               }
             }).catch(r => {
               console.log(r)
             })

            }
            ,
            add(){
              this.visible=true
            },
            chageSwitch(data,b,index){
              if(b.role.rname=='系统管理员'){
                this.$message('系统管理员不能冻结!')
                this.getData(1,2)
                return
              }
              console.log(data)
              console.log(b)
              console.log(index)
              axios.post("http:localhost:8086/user/update",{params:{
                uid:b.uid,
                isstatus:data
              }}).then(d=>{
                this.getData(1,2)
              }).catch()
              }
              ,
              checkchange(data, data2, indeterminate){
                console.log(data)
                console.log(data2);
                var self=this
                var checkedKeys = data2.checkedKeys;
                        console.log(checkedKeys);
                        var str='';

                        if(checkedKeys.length > 0){
                          checkedKeys.forEach(function(item){
                            str+=item+',';
                          });
                          if(data2.halfCheckedKeys!=null){
                            data2.halfCheckedKeys.forEach(function(item){
                              str+=item+',';
                            });
                          }
                        }else{
                          str=null;
                        }
                console.log(str);
                console.log(this.juese,'角色')
                if(this.juese.rid == null ){
                  return;
                }
                console.log(this.juese.rid);

                axios.get("http:localhost:8086/role/updateMenuAndRole",{params:{
                  rid: this.juese.rid,
                  str:str
                }}).then(vs => {
                  if(vs.status==200){
                    this.$message("修改成功")
                    console.log(this.$store.state.user)
                    this.$store.state.user.roles.forEach(function(item){
                   /* if(self.juese.rid==item.rid){
                      self.$message("该角色权限已修改请重新登陆")
                      self.$router.push({path:'/login'})
                    } */
                    })

                  }
                }).catch(r=>console.log(r))

              }
    },
    created: function() {
      this.getDate()
      this.isload()
      this.getMenu()
    }
  };
</script>
